<template>
  <div class="box_yj" ref="parent" :style="chartsDom">
    <span></span>
    <div class="sq-title">网格管理</div>
    <el-row :gutter="20" class="box_item" >
      <el-col :span="7" class="box_col">
        <div
          class="box_yh2 box_yh_an"
          :style="`height:${height/3}px;width:${height/3}px;color:lightgreen`"
        >
          <div class="mid-bg-1 box">
            <div style="font-size:12px">已处理</div>
            <div style="font-size:16px;margin:8px 0 0 0">100</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" class="box_col">
        <div
          class="box_yh2 box_yh_an"
          :style="`height:${height/3}px;width:${height/3}px;color:hotpink`"
        >
          <div class="mid-bg-2 box">
            <div style="font-size:12px">待处理</div>
            <div style="font-size:16px;margin:8px 0 0 0">100</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div ref="charts" :style="`height:${height/2}px;width:${chartsDom.width};color:hotpink`"></div>
    <animae-jz :style="`height:${height/2}px;width:${chartsDom.width};color:hotpink`" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { getCompanyIn } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      listData:'',
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val + 'px',
        height: this.height-10 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    
    this.$nextTick(_=>{
     this.init()
    })
  },
  methods: {
    init(){
      this.jz=false
      getCompanyIn(this.dateProp).then(({data:{data}})=>{
         this.listData=data
         this.jz=true
         this.drawChart(this.listData);
      })
    },
   drawChart(dataa) {
     console.log(this.listData)
      let option = {
        color:['#00bfc2','#BF3EFF'],
      tooltip: {
          trigger: 'axis',
          transitionDuration:0,
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#00bfc2'
              }
          }
      },
    grid: {
        left: '3%',
        top:'10%',
        right: '10%',
        bottom: '17%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#10bbcc'
                }
            },
            splitLine: {
                show: false
            },
            data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    
    legend: {
      left:'75%',
      textStyle:{
       color:['#f00', '#0f0']
     },
        data: ['已建', '未建']
    },
    yAxis: [
        {
            type: 'value',
             axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#10bbc2'
                }
            },
            splitLine: {
                show: false
            },
        }
    ],
    series: [
        {
            name: '已建',
            type: 'line',
            smooth: 0.5,
            areaStyle: {},
            data: [1,23,5,44,62,22,34,8,9,10,11,12]
        },
        {
            name: '未建',
            type: 'line',
            smooth: 0.5,
            areaStyle: {},
            data: [1,2,5,7,7,9,10,8,9,10,11,12]
        }
    ]
};
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px;
  .box_item{
      display flex
      justify-content center
      align-items center
      padding 5px 0
      box-sizing border-box
  }
</style>